<template>
  <card-box title="年空间资源分布">
    <div class="resource-info">
      <div class="chart1-box">
        <div class="unit">单位：个</div>
        <div class="chart1" ref="chart1"></div>
      </div>
      <div class="chart2" ref="chart2"></div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import * as echarts from 'echarts'
export default {
  mixins: [CommonMixin],
  data() {
    return {
      code: 'RESOURCE',
      loading: false,
      list: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      this.list = dataResult
      console.log('指示器：', this.list)
      this.$nextTick(() => {
        this.initLeft()
        this.initRight()
      })
    },
    initLeft() {
      const chart = this.$refs.chart1;
      const myChart = echarts.init(chart)
      const _this = this
      window.addEventListener('resize', myChart.resize)
      const max = this.list.reduce((pre, cur) => {
        if(pre < cur.total_count) return cur.total_count
        return pre
      }, 0) + 10
      const options = {
        // tooltip: {
        //   trigger: 'axis',
        // },
        radar: {
          radius: '50%',
          // shape: 'circle',
          axisName: {
            color: '#ffffff',
            fontSize: 12,
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(250, 250, 250, 0.05)', 'rgba(242, 242, 242, 0.05)']
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)'
            }
          },
          indicator: this.list.map(item => {
            return {
              name: `${item.category} ${item.total_count}`,
              min: 0,
              max
            }
          })
        },
        series: [
          {
            name: '年空间资源',
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: 'rgba(252, 255, 2, 1)' },
                { offset: 0.17, color: 'rgba(186, 255, 68, 1)' },
                { offset: 0.33, color: 'rgba(129, 255, 125, 1)' },
                { offset: 0.49, color: 'rgba(83, 255, 171, 1)' },
                { offset: 0.64, color: 'rgba(47, 255, 207, 1)' },
                { offset: 0.77, color: 'rgba(21, 255, 233, 1)' },
                { offset: 0.90, color: 'rgba(5, 255, 249, 1)' },
                { offset: 1, color: 'rgba(0, 255, 255, 1)' }
              ])
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: 'rgba(241, 90, 36, 1)' },
                { offset: 0.9, color: 'rgba(243, 109, 33, 1)' },
                { offset: 0.21, color: 'rgba(245, 130, 31, 1)' },
                { offset: 0.33, color: 'rgba(246, 142, 30, 1)' },
                { offset: 0.45, color: 'rgba(247, 147, 30, 1)' },
                { offset: 0.49, color: 'rgba(237, 147, 37, 1)' },
                { offset: 0.57, color: 'rgba(212, 148, 59, 1)' },
                { offset: 0.67, color: 'rgba(172, 150, 94, 1)' },
                { offset: 0.79, color: 'rgba(116, 152, 143, 1)' },
                { offset: 0.92, color: 'rgba(45, 155, 205, 1)' },
                { offset: 1, color: 'rgba(0, 157, 245, 1)' }
              ])
            },
            data: [
              {
                value: this.list.map(item => item.total_count),
                name: '数量',
                symbolSize: 3
              },
            ]
          }
        ]
      };
      myChart.setOption(options)
    },
    initRight() {
      const chart = this.$refs.chart2;
      const myChart = echarts.init(chart)
      window.addEventListener('resize', myChart.resize)
      const gradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        { offset: 0, color: 'rgba(43, 142, 243, 1)' },
        { offset: 1, color: 'rgba(71, 228, 229, 1)' }
      ]);
      const options = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return `${params.data.value}%\n资源利用率`
            }
          },
        series: [
          {
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '100%',
            startAngle: 90,
            endAngle: -270,
            itemStyle: {
              color: gradient
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [[1, 'rgba(255, 255, 255, 0.16)']] // 底色
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: -20,
              color: '#999',
              fontSize: 20
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '100%',
              lineHeight: 24,
              borderRadius: 0,
              offsetCenter: [0, 0],
              fontSize: 16,
              fontWeight: 'bolder',
              formatter: '{value} %\n资源利用率',
              color: '#fff'
            },
            data: [
              {
                value: this.list.reduce((pre, cur) => pre + cur.resource_rate, 0) / this.list.length
              }
            ]
          }
        ]
      }
      myChart.setOption(options)
    }
  }
}
</script>
<style lang="scss" scoped>
.resource-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: tvh(16) tvw(16);
  box-sizing: border-box;
  height: tvh(175);

  .chart1-box {
    position: relative;
    flex: 1;
    height: 100%;
    background: url(~@/assets/images/yyzhkb/kb-resource-left-bg.svg) center center no-repeat;
    background-size: 100% 100%;
    .unit {
      font-size: tvw(12);
      color: #E6F7FF;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .chart1 {
    width: 100%;
    height: 100%;
  }

  .chart2 {
    margin-left: tvw(16);
    width: tvw(158);
    height: 100%;
  }
}
</style>